import React from "react";
import { withRouter } from "react-router-dom";
import { Layout } from "antd";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
import { Menu, Dropdown } from "antd";
import { Avatar } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { connect } from "react-redux";

const { Header } = Layout;

function TopHeader(props) {
  const {
    role: { roleName },
    username
  } = JSON.parse(localStorage.getItem("token"));
  const toggle = () => {
    props.changeCollapsed();
  };
  const menu = (
    <Menu>
      <Menu.Item key="1">{roleName}</Menu.Item>
      <Menu.Item
        key="2"
        danger
        onClick={() => {
          localStorage.removeItem("token");
          props.history.replace("/login");
        }}
      >
        <div>退出</div>
      </Menu.Item>
    </Menu>
  );
  return (
    <Header className="site-layout-background" style={{ padding: "0 24px" }}>
      {props.isCollapsed ? (
        <MenuUnfoldOutlined onClick={toggle} />
      ) : (
        <MenuFoldOutlined onClick={toggle} />
      )}
      <span className="title">首页</span>
      <div className="right-box">
        <div className="tip">
          欢迎<span className="strong">{username}</span>回来
        </div>
        <Dropdown overlay={menu} placement="bottomLeft" arrow>
          <Avatar
            style={{
              backgroundColor: "#87d068"
            }}
            size={48}
            icon={<UserOutlined />}
          />
        </Dropdown>
      </div>
    </Header>
  );
}
const mapStateToProps = state => {
  return {
    isCollapsed: state.collapsed.isCollapsed
  };
};
const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: "change_collapsed"
    };
  }
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(TopHeader));
